<template>
	<div class="tl mine-box">
		<div class="tc welcom">
			<template v-if="type=='kindergarten'">欢迎{{fullName}}园长</template>
			<template v-else>欢迎{{fullName}}老师</template>
		</div>
		<div class="mine-block" v-if="type=='kindergarten'">
			<div class="mine-title flex">
				<span style="background: #5DC9FF;"></span>
				学校管理
			</div>
			<div class="menus flex">
				<div class='tc flex' v-for="item in school" @click="link(item)">
					<div class="menu_icon" style="background-color: #5dc9ff;">
						<img :src="item.icon" alt="">
					</div>
					<div>
						{{item.name}}
					</div>
				</div>
			</div>
		</div>
		<div class="mine-block">
			<div class="mine-title flex">
				<span style="background: #FFA961;"></span>
				幼儿管理
			</div>
			<div class="menus flex">
				<div class='tc flex' v-for="item in student" @click="link(item)" v-if="menushow(item)">
					<div class="menu_icon" style="background-color: #FFA961;">
						<img :src="item.icon" alt="">
					</div>
					<div>
						{{item.name}}
					</div>
				</div>
			</div>
		</div>
		<div class="mine-block">
			<div class="mine-title flex">
				<span style="background: #14DBDF;"></span>
				我的工作
			</div>
			<div class="menus flex">
				<div class='tc flex' @click="$router.push('/classDaily')">
					<div class="menu_icon" style="background-color: #14DBDF;">
						<img src="@/../static/img/icon/icon4.png" alt="">
					</div>
					<div>
						校园动态
					</div>
				</div>
				<div class='tc flex' @click="takePhoto">
					<div class="menu_icon" style="background-color: #14DBDF;">
						<img src="@/../static/img/icon/icon1.png" alt="">
					</div>
					<div>
						我的人脸
					</div>
				</div>
				<div class='tc flex' @click="$router.push('/liveStream')">
					<div class="menu_icon" style="background-color: #14DBDF;">
						<img src="@/../static/img/icon/icon20.png" alt="">
					</div>
					<div>
						宝宝直播
					</div>
				</div>
				<div class='tc flex' @click="$router.push('/recipe')">
					<div class="menu_icon" style="background-color: #14DBDF;">
						<img src="@/../static/img/icon/icon22.png" alt="">
					</div>
					<div>
						宝宝食谱
					</div>
				</div>
				<div class='tc flex' @click="$router.push('/askForLeaveList')" v-if="type=='classMaster'">
					<div class="menu_icon" style="background-color: #14DBDF;">
						<img src="@/../static/img/icon/icon14.png" alt="">
					</div>
					<div>
						教师请假
					</div>
				</div>
			</div>
		</div>
		<div class="mine-block">
			<div class="mine-title flex">
				<span style="background: #FF7482;"></span>
				设置管理
			</div>
			<div class="menus flex">
				<div class='tc flex' @click="unbindFn">
					<div class="menu_icon" style="background-color: #FF7482;">
						<img src="@/../static/img/icon/icon8.png" alt="">
					</div>
					<div>
						解除绑定
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import mySelect from '@/components/select.vue'
	import wx from "weixin-js-sdk";
	export default {
		components: {
			mySelect
		},
		props: {
			type: {
				type: String,
				default: '',
			}
		},
		data() {
			let _this = this;
			return {
				loginType: _this.$Cookies.get('loginType'),
				school: [{
						name: '学校简介',
						link: '/schoolSituation',
						icon: require('@/../static/img/icon/icon23.png')
					},
					{
						name: '教师请假',
						link: '/teacherLeave',
						icon: require('@/../static/img/icon/icon14.png')
					},
					{
						name: '教师考勤',
						link: '/teaAttendCount',
						icon: require('@/../static/img/icon/icon21.png')
					},
					{
						name: '家长反馈',
						link: '/feedbackList',
						icon: require('@/../static/img/icon/icon5.png')
					},
					{
						name: '设备管理',
						link: '/equipment',
						icon: require('@/../static/img/icon/icon18.png')
					},
					{
						name: '视频监控',
						link: '/camera',
						icon: require('@/../static/img/icon/icon19.png')
					},
				],
				student: [{
						name: '考勤统计',
						link: '/kidsAttendCount',
						icon: require('@/../static/img/icon/icon9.png'),
						loginType: ['kindergarten', 'classMaster']
					},
					{
						name: '晨检统计',
						link: '/reportList',
						icon: require('@/../static/img/icon/icon3.png'),
						loginType: ['kindergarten', 'classMaster']
					},
					{
						name: '幼儿请假',
						link: '/studentLeave',
						icon: require('@/../static/img/icon/icon13.png'),
						loginType: ['kindergarten', 'classMaster']
					},
					{
						name: '离园确认',
						link: '/studentApply',
						icon: require('@/../static/img/icon/icon11.png'),
						loginType: ['kindergarten', 'classMaster']
					},
					{
						name: '人脸录入',
						link: '/face-Record',
						icon: require('@/../static/img/icon/icon15.png'),
						loginType: ['kindergarten']
					},
					{
						name: '人脸审核',
						link: '/faceManagement',
						icon: require('@/../static/img/icon/icon16.png'),
						loginType: ['kindergarten']
					},
					{
						name: '家长审核',
						link: '/bindReview',
						icon: require('@/../static/img/icon/icon7.png'),
						loginType: ['kindergarten']
					},
					{
						name: '视频监控',
						link: '/camera',
						icon: require('@/../static/img/icon/icon19.png'),
						loginType: ['classMaster']
					},
				],
			}
		},
		methods: {
			takePhoto() {
				this.$router.push({
					path: '/photograph',
					query: {
						id: '',
						loginType: 'classMaster'
					}
				})
			},
			unbindFn() {
				this.$http.unbindTea().then(resp => {
					this.$weui.toast('解绑成功');
					wx.closeWindow();
				})
			},
			link(item) {
				this.$router.push(item.link)
			},
			menushow(item) {
				let str = item.loginType.join(',');
				let io = str.indexOf(this.type)
				return io == -1 ? false : true
			}
		},
		created() {
			this.fullName = this.$Cookies.get('fullName');
		}
	}
</script>

<style scoped>
	.mine-box {
		width: 100%;
	}

	.welcom {
		width: 100%;
		background: #FFFFFF;
		margin-bottom: 1rem;
		padding: 0.5rem 0;
		box-sizing: border-box;
	}

	.mine-block {
		width: calc(100% - 2rem);
		margin: 1.5rem auto;
		border-radius: 5px;
	}

	.mine-title {
		width: 100%;
		padding: 1.5rem 1rem 0rem 1rem;
		color: #B2B2B2;
		font-size: 1.6rem;
		color: #101010;
		background: #FFFFFF;
		box-sizing: border-box;
	}

	.mine-title span {
		display: inline-block;
		width: 0.4rem;
		height: 1.6rem;
		margin-right: 1rem;
		border-radius: 10px;
	}

	.menus {
		width: 100%;
		flex-wrap: wrap;
		background: #FFFFFF;
		justify-content: space-around;
		padding-bottom: 1rem;
	}

	.menus>div {
		width: 25%;
		padding: 0 1.4rem;
		box-sizing: border-box;
		height: 7rem;
		line-height: 1.4rem;
		flex-direction: column;
		margin-top: 10px;
		font-size: 1.2rem;
		white-space: nowrap;
	}

	.menu_icon {
		width: 4rem;
		height: 4rem;
		margin-bottom: 5px;
		border-radius: 50%;
		overflow: hidden;
	}

	.menu_icon img {
		width: 2rem;
		height: 2rem;
		margin-top: 1rem;
	}

	.menus::after {
		content: "";
		flex: auto;
	}
</style>
